<template>
  <div v-perms="['Log.operateList']">
    <div v-perms="['User.list']">
      <el-form :model="searchData" inline>

        <el-form-item label="用户">
          <el-select v-model="searchData.user_id" placeholder="请选择用户">
            <el-option v-for="(user, k) in userList" :key="k" :label="user" :value="k"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-loading="result.loading">

      <div class="mt-2">
        <el-table :data="result.list">
          <el-table-column prop="id" label="ID" width="85" align="center"/>
          <el-table-column prop="user_id" label="用户" min-width="50" align="center">
            <template #default="{ row }">
              {{ userList[row.user_id] }}
            </template>
          </el-table-column>
          <el-table-column prop="type" label="类型" min-width="50" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.type === '新增'" type="success">新增</el-tag>
              <el-tag v-else-if="row.type === '编辑'">编辑</el-tag>
              <el-tag v-else-if="row.type === '删除'" type="danger">删除</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="table" label="表名" min-width="100" align="center"/>
          <el-table-column prop="data_id" label="数据ID" min-width="50" align="center"/>
          <el-table-column prop="controller" label="控制器" min-width="100" align="center"/>
          <el-table-column prop="action" label="动作" min-width="50" align="center"/>
          <el-table-column prop="runtime" label="时长" min-width="60" align="center"/>
          <el-table-column prop="memory" label="内存" min-width="100" align="center"/>
          <el-table-column prop="url" label="URL" min-width="200" show-overflow-tooltip align="center"/>
          <el-table-column prop="method" label="方法" min-width="50" align="center"/>
          <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip align="center"/>
          <el-table-column prop="create_time" label="创建时间" min-width="170" align="center"/>
        </el-table>
      </div>

      <div class="flex justify-end mt-2">
        <Pagination :paging="paging"/>
      </div>
    </div>

  </div>
</template>

<script setup>

import Pagination from '@/components/pagination/index.vue'
import {useList} from "@/hooks/useList";
import {operate} from '@/api/log'
import {list} from '@/api/user'
import {onMounted, reactive, ref} from "vue";

const userList = ref({})
const searchData = reactive({
  user_id: '',
})

const {paging, result, getList, search, resetSearch} = useList({
  apiFun: operate,
  params: searchData
})

onMounted(() => {
  list({page_size: 500}).then((data) => {
    userList.value[1] = 'admin'
    data.list.forEach((item) => {
      userList.value[item.id] = item.name
    })
  })
  getList()
})

</script>

<style scoped>

</style>